<template>
    <div class="nav-bar-item" @click="itemClick">
            <!-- 未点击时候的图标 -->
          <slot name="item-icon" v-if = "!isActive"></slot>
            <!-- 点击之后实现的图标 -->
          <slot name="item-icon-active" v-else></slot>
          <div :style="isShow">
            <slot name="item-text"></slot>
          </div>

        </div>
</template>

<script>
export default {
    name: 'NavbarItem',
    methods: {
        itemClick(){
            this.$router.replace(this.link).catch(err => err);
        },
        
    },
    //计算属性
    computed: {
        isActive(){
            return this.$route.path === this.link;
        },
        isShow(){
            //三元运算符
            return this.isActive ? {color: this.activeTextColor} : {};
        }
    },
    // 父传子
    props: {
        link: {
            type: String,
            //必须传
            require : true
        },
        activeTextColor: {
            type: String,
            default: 'red'
        }
    }
}
</script>

<style scoped>
.nav-bar-item{
  flex: 1;
}

.nav-bar-item img{
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

.isActive{
  color: rgb(229, 76, 102);
}
</style>